<template>
	<div class="person">
		<h3>当前总人数：{{total}}</h3>
		<input type="text" placeholder="输入姓名" v-model="name">
		<button @click="addPerson">添加一个人</button>
		<ul>
			<li v-for="person in list" :key="person.id">{{person.name}}</li>
		</ul>
	</div>
</template>

<script>
	import {mapState,mapGetters} from 'vuex'
	export default {
		name:'Person',
		data() {
			return {
				name:''
			}
		},
		computed:{
			...mapState('ren',['list']),
			...mapGetters('ren',['total'])
		},
		methods: {
			addPerson(){
				const personObj = {id:Date.now(),name:this.name}
				this.$store.dispatch('ren/add',personObj)
			}
		},
	}
</script>

<style scoped>
	.person{
		background-color: skyblue;
		padding: 20px;
	}
</style>